<template>
	<div class="report-container">
		<!-- 主要内容区域 -->
		<main class="report-main">
			<div class="content-wrapper">
				<!-- 标题区域 -->
				<section class="title-section">
					<h1 class="page-title">心理测评报告</h1>
					<p class="page-subtitle">查看你的心理能力测评结果</p>
				</section>

				<!-- 报告列表 -->
				<section class="reports-section">
					<div class="reports-grid">
						<!-- 报告卡片示例 -->
						<div
							v-for="report in reports"
							:key="report.id"
							class="report-card"
							@click="viewReport(report)"
						>
							<div class="report-header">
								<div class="report-icon">📋</div>
								<div
									class="report-status"
									:class="report.status"
								>
									{{ report.statusText }}
								</div>
							</div>
							<div class="report-content">
								<h3 class="report-title">{{ report.title }}</h3>
								<p class="report-date">
									测评时间：{{ report.date }}
								</p>
								<div class="report-stats">
									<div class="stat-item">
										<span class="stat-label">完成度</span>
										<span class="stat-value"
											>{{ report.completionRate }}%</span
										>
									</div>
									<div class="stat-item">
										<span class="stat-label">总题数</span>
										<span class="stat-value"
											>{{ report.totalQuestions }}题</span
										>
									</div>
								</div>
							</div>
							<div class="report-footer">
								<el-button type="primary" class="view-btn">
									查看详情
								</el-button>
							</div>
						</div>

						<!-- 空状态 -->
						<div v-if="reports.length === 0" class="empty-state">
							<div class="empty-icon">📊</div>
							<h3 class="empty-title">暂无测评报告</h3>
							<p class="empty-desc">
								完成心理测量表后，可以在这里查看你的测评报告
							</p>
							<el-button type="primary" @click="goToQuiz">
								开始测评
							</el-button>
						</div>
					</div>
				</section>

				<!-- 统计概览 -->
				<section class="stats-section" v-if="reports.length > 0">
					<h2 class="section-title">测评统计</h2>
					<div class="stats-cards">
						<div class="stat-card">
							<div class="stat-card-icon">📝</div>
							<div class="stat-card-content">
								<h4 class="stat-card-value">
									{{ totalReports }}
								</h4>
								<p class="stat-card-label">总测评次数</p>
							</div>
						</div>
						<div class="stat-card">
							<div class="stat-card-icon">✅</div>
							<div class="stat-card-content">
								<h4 class="stat-card-value">
									{{ completedReports }}
								</h4>
								<p class="stat-card-label">已完成测评</p>
							</div>
						</div>
						<div class="stat-card">
							<div class="stat-card-icon">⏳</div>
							<div class="stat-card-content">
								<h4 class="stat-card-value">
									{{ pendingReports }}
								</h4>
								<p class="stat-card-label">进行中测评</p>
							</div>
						</div>
					</div>
				</section>
			</div>
		</main>

		<!-- 装饰背景 -->
		<div class="background-decoration">
			<div class="floating-leaves">
				<div
					v-for="leaf in leaves"
					:key="leaf.id"
					class="leaf"
					:style="leaf.style"
				></div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

// 定义报告类型
interface Report {
	id: number
	title: string
	date: string
	status: 'completed' | 'pending' | 'draft'
	statusText: string
	completionRate: number
	totalQuestions: number
}

// 定义叶子类型
interface Leaf {
	id: number
	style: {
		left: string
		animationDelay: string
		animationDuration: string
	}
}

// 响应式数据
const router = useRouter()
const reports = ref<Report[]>([])
const leaves = ref<Leaf[]>([])

// 计算属性
const totalReports = computed(() => reports.value.length)
const completedReports = computed(
	() => reports.value.filter((r) => r.status === 'completed').length
)
const pendingReports = computed(
	() => reports.value.filter((r) => r.status === 'pending').length
)

// 生命周期
onMounted(() => {
	// 检查用户信息
	const savedUserInfo = localStorage.getItem('userInfo')
	if (!savedUserInfo) {
		ElMessage.warning('请先登录')
		router.push('/')
		return
	}

	// 生成浮动叶子
	generateLeaves()

	// 加载报告数据（模拟数据）
	loadReports()
})

// 生成浮动叶子
const generateLeaves = () => {
	leaves.value = Array.from({ length: 12 }, (_, i) => ({
		id: i,
		style: {
			left: `${Math.random() * 100}%`,
			animationDelay: `${Math.random() * 5}s`,
			animationDuration: `${Math.random() * 3 + 3}s`,
		},
	}))
}

// 加载报告数据（模拟）
const loadReports = () => {
	// 这里使用模拟数据，实际应该从API获取
	reports.value = [
		{
			id: 1,
			title: '七种能力综合测评',
			date: '2024-10-07 14:30',
			status: 'completed',
			statusText: '已完成',
			completionRate: 100,
			totalQuestions: 70,
		},
		{
			id: 2,
			title: '自我认知能力测评',
			date: '2024-10-05 10:20',
			status: 'pending',
			statusText: '进行中',
			completionRate: 60,
			totalQuestions: 10,
		},
	]
}

// 查看报告详情
const viewReport = (report: Report) => {
	ElMessage.info(`查看报告：${report.title}`)
	// 这里可以跳转到报告详情页面
	// router.push(`/report/${report.id}`)
}

// 跳转到测评页面
const goToQuiz = () => {
	router.push('/quiz')
}
</script>

<style scoped>
.report-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 50%, #a5d6a7 100%);
	position: relative;
	overflow: hidden;
}

/* 主要内容 */
.report-main {
	position: relative;
	z-index: 10;
	padding: 40px 20px;
}

.content-wrapper {
	max-width: 1200px;
	margin: 0 auto;
}

/* 标题区域 */
.title-section {
	text-align: center;
	margin-bottom: 40px;
}

.page-title {
	font-size: 36px;
	font-weight: bold;
	color: #2c3e50;
	margin-bottom: 12px;
	background: linear-gradient(135deg, #8bc34a 0%, #4caf50 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.page-subtitle {
	font-size: 18px;
	color: #666;
}

/* 报告列表 */
.reports-section {
	margin-bottom: 40px;
}

.reports-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	gap: 24px;
}

.report-card {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 20px;
	padding: 24px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(20px);
}

.report-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 16px 40px rgba(139, 195, 74, 0.3);
}

.report-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.report-icon {
	font-size: 36px;
}

.report-status {
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
}

.report-status.completed {
	background: #4caf50;
	color: white;
}

.report-status.pending {
	background: #ff9800;
	color: white;
}

.report-status.draft {
	background: #9e9e9e;
	color: white;
}

.report-content {
	margin-bottom: 20px;
}

.report-title {
	font-size: 20px;
	font-weight: bold;
	color: #2c3e50;
	margin-bottom: 8px;
}

.report-date {
	font-size: 14px;
	color: #999;
	margin-bottom: 16px;
}

.report-stats {
	display: flex;
	gap: 20px;
}

.stat-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.stat-label {
	font-size: 12px;
	color: #666;
}

.stat-value {
	font-size: 16px;
	font-weight: 600;
	color: #4caf50;
}

.report-footer {
	display: flex;
	justify-content: center;
}

.view-btn {
	width: 100%;
	height: 40px;
	border-radius: 12px;
	font-weight: 600;
}

/* 空状态 */
.empty-state {
	grid-column: 1 / -1;
	text-align: center;
	padding: 60px 20px;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 20px;
	backdrop-filter: blur(20px);
}

.empty-icon {
	font-size: 64px;
	margin-bottom: 20px;
}

.empty-title {
	font-size: 24px;
	font-weight: bold;
	color: #2c3e50;
	margin-bottom: 12px;
}

.empty-desc {
	font-size: 16px;
	color: #666;
	margin-bottom: 24px;
}

/* 统计概览 */
.stats-section {
	margin-bottom: 40px;
}

.section-title {
	font-size: 28px;
	font-weight: bold;
	color: #2c3e50;
	margin-bottom: 24px;
	text-align: center;
}

.stats-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 24px;
}

.stat-card {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 20px;
	padding: 24px;
	display: flex;
	align-items: center;
	gap: 20px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(20px);
	transition: all 0.3s ease;
}

.stat-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(139, 195, 74, 0.2);
}

.stat-card-icon {
	font-size: 48px;
	flex-shrink: 0;
}

.stat-card-content {
	flex: 1;
}

.stat-card-value {
	font-size: 32px;
	font-weight: bold;
	color: #4caf50;
	margin-bottom: 4px;
}

.stat-card-label {
	font-size: 14px;
	color: #666;
}

/* 背景装饰 */
.background-decoration {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
}

.floating-leaves {
	position: absolute;
	width: 100%;
	height: 100%;
}

.leaf {
	position: absolute;
	width: 20px;
	height: 20px;
	background: linear-gradient(135deg, #8bc34a 0%, #4caf50 100%);
	border-radius: 0 100% 0 100%;
	opacity: 0.3;
	animation: float-leaf 5s infinite ease-in-out;
}

@keyframes float-leaf {
	0%,
	100% {
		transform: translateY(0) rotate(0deg);
		opacity: 0.3;
	}
	50% {
		transform: translateY(-30px) rotate(180deg);
		opacity: 0.6;
	}
}

/* 响应式设计 */
@media (max-width: 768px) {
	.page-title {
		font-size: 28px;
	}

	.page-subtitle {
		font-size: 16px;
	}

	.reports-grid {
		grid-template-columns: 1fr;
	}

	.stats-cards {
		grid-template-columns: 1fr;
	}
}
</style>
